<template>
  <div class="Purchases">
    <div class="Purchase">
      <div class="top">
        <span class="top1" @click="funApp()"
          ><p class="top11">
            先鉴别后发货 &nbsp;&nbsp;保障全新正品
            <span class="iconfont icon-youjiantou"></span>
          </p>
          <span class="top12"
            ><p>多重鉴别</p>
            <p>逐件查验</p>
            <p class="top121">正品保障</p></span
          >
        </span>
        <span class="top2"
          ><span class="iconfont icon-all" @click="funclass()"></span>
          <br />
          分类</span
        >
      </div>

      <div class="input">
        <input
          type="text"
          class="inputs"
          @click="funinput()"
          :style="{ width: number }"
        />
        <span class="iconfont icon-fangdajing"></span>
        <span class="iconfont icon-zhaoxiangji"></span>
      </div>
      <div class="nav">
        <router-link to="/Purchase/Recommend" active-class="N1"
          ><div class="nav1">推荐</div></router-link
        >
        <router-link to="/Purchase/Footwear" active-class="N1"
          ><div class="nav1">鞋类</div></router-link
        >
        <router-link to="/Purchase/Girl" active-class="N1"
          ><div class="nav1">女装</div></router-link
        >
        <router-link to="/Purchase/Packet" active-class="N1"
          ><div class="nav1">箱包</div></router-link
        >
        <router-link to="/Purchase/Tide" active-class="N1"
          ><div class="nav1">潮服</div></router-link
        >
        <router-link to="/Purchase/Trip" active-class="N1"
          ><div class="nav1">出行</div></router-link
        >
        <router-link to="/Purchase/Watches" active-class="N1"
          ><div class="nav1">手表</div></router-link
        >
      </div>
    </div>

    <div class="centent">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <router-view />
      </van-pull-refresh>
    </div>

    <Footer />
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      input: "",
      number: "100%",
      count: 0,
      isLoading: false,
    };
  },
  methods: {
    funinput() {
      this.$router.push("./Input");
    },
    onRefresh() {
      setTimeout(() => {
        Toast("Refresh the success");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    funApp(){
      this.$router.push("/dewuapp")
    },
    funclass(){
      this.$router.push("/classify")
    }
  },
};
</script>

<style scoped>
.Purchases {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: scroll;
  width: 100%;
  position: relative;
}
.centent {
  flex: 1;
  margin-top: 2rem;
}
.nav {
  width: 90%;
  display: flex;
  overflow: auto;
  margin: auto;
  margin-top: 0.3rem;
  height: 0.4rem;
}
a {
  width: auto;
}
.nav1 {
  width: 0.6rem;
  color: white;
  text-align: center;
  /* font-size: .16rem; */
}
.N1 {
  font-size: 0.2rem;
  line-height: 0.2rem;
  font-weight: bolder;
}

.icon-youjiantou {
  font-size: 0.16rem;
}
.icon-fangdajing {
  font-size: 0.2rem;
  position: absolute;
  top: 0.05rem;
  left: 0.07rem;
}
.icon-all {
  font-size: 0.3rem;
}
.icon-zhaoxiangji {
  font-size: 0.2rem;
  position: absolute;
  top: 0.05rem;
  right: 0.07rem;
}
.Purchase {
  width: 100%;
  background-image: linear-gradient(#1b69ff, #58c5ff, white);
  position: fixed;
  top: 0rem;
  z-index: 999;
}
.top {
  width: 90%;
  margin: auto;
  display: flex;
  color: white;
  margin-top: 0.2rem;
  justify-content: space-between;
}
.top11 {
  font-size: 0.18rem;
  font-weight: bolder;
}
.top12 {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.684);
}
.top2 {
  margin-top: 0.1rem;
  font-weight: bolder;
}
.top121 {
  margin-right: 0.2rem;
}
.input {
  width: 90%;
  margin: auto;
  position: relative;
  margin-top: 0.1rem;
}
.inputs {
  /* padding-left: .1rem; */
  height: 0.3rem;
  border: 0.01rem rgb(245, 244, 244) solid;
  background-color: rgb(245, 244, 244);
}
</style>